import React from "react";
import "../css/todoList.css";
import { TODOKEY, FINISHED, PENDDING , DELETED} from "./config";
export default class TodoList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            todos: JSON.parse(localStorage.getItem(TODOKEY)) || [],
            filterTodos: [],
            // filterTodos:[],
            TodosIndex:'',
        }
    }

    //创建阶段
    //组件将要挂载
    componentWillMount() {
        var tempArray = [];
        this.state.todos.forEach(element=>{
            if(element.status !== DELETED){
                tempArray.push(element)
            }
        })
        this.setState({
            todos:tempArray
        })
    }

    //

    render() {
        var detail = document.getElementsByClassName("todoList_item_container");
        for(var i =0;i<detail.length;i++){
            // detail[i].index = i;
            this.state.TodosIndex = i;
            }
        console.log(this.props);
        return (
            <div className="todoList_container">
                <div className="todoList_wrapper_jin">
                    <div className="todoList_wrapper_wrapper">
                        <div>
                            <h1>正在进行</h1>
                        </div>
                        <div>
                            <h3>{detail.length}</h3>
                        </div>
                    </div>
                    <div className="todoList_wrapper_list">
                        {
                            this.state.todos.map((event, index) => {
                                // this.state.TodosIndex = index;
                        
                                // console.log(index)
                                if(event.status === PENDDING){
                                    return <div key={index}
                                    className="todoList_item_container">
                                    <div className="todoList_item_checkBox">
                                        <input type="checkbox"
                                            checked={event.status === FINISHED}
                                            onClick={(element) => {
                                                console.log(element.target.checked);
                                                var checked = element.target.checked
                                                if (checked) {
                                                    event.status = FINISHED;
                                                } else {
                                                    event.status = PENDDING;
                                                }
                                                //更新组件状态
                                                this.setState({
                                                    todos: this.state.todos
                                                })
                                                localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                            }} />
                                    </div>
                                    <div className="todoList_item_content">
                                        {event.content}
                                    </div>
                                    <div className="todoList_item_button">
                                        <button onClick={()=>{
                                            event.status=DELETED;
                                            var index = this.state.todos.findIndex((subElement)=>{
                                                return subElement.content === event.content
                                            })
                                            if(index !== -1){
                                                this.state.todos.splice(index,1)
                                            }
                                            this.setState({
                                                todos:this.state.todos
                                            })
                                            localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                        }}>删除</button>
                                    </div>
                                </div>
                                }
                            })
                        }
                    </div>
                </div>
                <div className="todoList_wrapper_wan">
                    <div className="todoList_wrapper_oo">
                        <div>
                            <h1>已经完成</h1>
                        </div>
                        <div>
                            <h3>1</h3>
                        </div>
                    </div>
                </div>
                {
                    this.state.todos.map((event, index) => {
                        
                        if (event.status === FINISHED) {
                            return <div key={index}
                            className="todoList_item_container">
                                <div className="todoList_item_checkBox">
                                    <input type="checkbox"
                                        checked={event.status === FINISHED}
                                        onClick={(element) => {
                                            console.log(element.target.checked);
                                            var checked = element.target.checked
                                            if (checked) {
                                                event.status = FINISHED;
                                            } else {
                                                event.status = PENDDING;
                                            }
                                            //更新组件状态
                                            this.setState({
                                                todos: this.state.todos
                                            })
                                            localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                        }} />
                                </div>
                                <div className="todoList_item_content">
                                    {event.content}
                                </div>
                                <div className="todoList_item_button">
                                    <button onClick={()=>{
                                            event.status=DELETED;
                                            var index = this.state.todos.findIndex((subElement)=>{
                                                return subElement.content === event.content
                                            })
                                            if(index !== -1){
                                                this.state.todos.splice(index,1)
                                            }
                                            this.setState({
                                                todos:this.state.todos
                                            })
                                            localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
                                        }}>删除</button>
                                </div>
                            </div>
                        }
                    })
                }
            </div>
        )
    }

    componentWillReceiveProps(props) {
        //更新阶段
        console.log(props);
        //接受新的props,更新组件的状态
        this.props = props;
        var index = this.state.todos.findIndex((event) => {
            return event.content === this.props.todo.content
        })
        if (index !== -1) {
            alert("不能添加重复的信息!!");
            return;
        }
        this.state.todos.push(this.props.todo)
        //保存
        localStorage.setItem(TODOKEY, JSON.stringify(this.state.todos))
        this.setState({
            todos: this.state.todos
        })
    }

    shouldComponentUpdate() {
        return true;
    }
}
